// pages/category/index.js
import { request } from "../../request/index.js"

Page({
  data: {
    // 左侧菜单数据
    leftMenuList: [],
    // 右侧商品数据
    rightContent: [],
    // 被点击的左侧菜单栏
    currentIndex: 0,
    // 滚动条距离顶部的距离
    scrollTop: 0
  },

  // 接口的返回数据（接受结果，提高代码可读性）
  Cates: [],

  onLoad: function (options) {
    // 获取本地存储中的数据
    const Cates = wx.getStorageSync("cates");
    // 本地存储中不存在数据
    if (!Cates) {
      this.getCates()
    } else {
      // 有旧数据，判断数据是否过期（此处设定时间为10s，1000是毫秒单位）
      if (Date.now() - Cates.time > 1000 * 10) {
        // 数据过期，重新发送请求
        this.getCates()
      } else {
        // 旧数据可用
        console.log("可以使用旧数据")
        this.Cates = Cates.data
        const leftMenuList = this.Cates.map(v => v.cat_name)
        // 构建右侧商品数据
        const rightContent = this.Cates[0].children
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },

  // 获取分类数据
  async getCates() {
    // request({
    //   url: "/categories"
    // }).then(res => {
    //   console.log(res)
    //   this.Cates = res.data.message

    //   // 把接口中的数据存入本地存储中
    //   wx.setStorageSync("cates", { time: Date.now(), data: this.Cates })

    //   // 构建左侧菜单数据
    //   // map()方法返回一个新数组，此处用一个临时变量将新数组存入便于操作新数组，v相对于数组内每个元素，类似于item
    //   const leftMenuList = this.Cates.map(v => v.cat_name)
    //   // 构建右侧商品数据
    //   const rightContent = this.Cates[0].children
    //   this.setData({
    //     leftMenuList,
    //     rightContent,
    //     // 重新设置右侧内容的scroll-view标签距离顶部的距离
    //     scrollTop:0
    //   })
    // })


    // 使用es7的async await发送请求（代码更清晰，看起来像同步代码）
    // 如果该行代码执行失败，下面的代码均不会执行
    const res = await request({ url: "/categories" })
    this.Cates = res.data.message

    // 把接口中的数据存入本地存储中
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates })

    // 构建左侧菜单数据
    // map()方法返回一个新数组，此处用一个临时变量将新数组存入便于操作新数组，v相对于数组内每个元素，类似于item
    const leftMenuList = this.Cates.map(v => v.cat_name)
    // 构建右侧商品数据
    const rightContent = this.Cates[0].children
    this.setData({
      leftMenuList,
      rightContent,
      // 重新设置右侧内容的scroll-view标签距离顶部的距离
      scrollTop: 0
    })
  },

  // 左侧菜单的点击事件
  handleItemTap(e) {
    console.log(e)
    // 1.获取被点击的标题身上的索引
    // 2.给data中的currentIndex赋值
    // 3.根据不同索引改变右侧商品数据
    const { index } = e.currentTarget.dataset
    const rightContent = this.Cates[index].children
    this.setData({
      currentIndex: index,
      rightContent
    })
  }
})